<script setup lang="ts">
	import { ref, reactive, watch } from 'vue'
	import {
		onLoad,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	onLoad((options) => {
		console.log(options,"打印")
		searchWord.value = options.value
		getList()
	})
	let searchWord = ref('')
	onReachBottom(() => {
		if (obj.manage == '完成') {
			//操作时禁止分页
			return
		}
		let type;
		//当切换到服务列表时，要给serviceType赋值
		if(obj.current == 6){
			type = obj.currentService + 1
		} else {
			type = 0
		}
		page.value ++
		proxy.$req('GET', proxy.$api.searchAll, {
			keyWord: searchWord.value,
			pageNum: page.value,
			pageSize: 10,
			searchType: sousuoType.value
		}).then((res) => {
			dataList[`data${sousuoType.value}`] = res.result.records.concat(dataList[`data${sousuoType.value}`])
		})
	})
	const searchList = () => {
		page.value = 1		getList()	}
	onUnload(() => {
		uni.hideLoading()
	})
	let sousuoType = ref(4)
	let page = ref(1)
	let obj = reactive({
		manage: '管理',
		current: 0,
		currentService: 0,
		title: 'checkbox 复选框',
	})
	// let tabList = reactive([{
	// 	name: '招商',
	// }, {
	// 	name: '店铺',
	// }, {
	// 	name: '论坛'
	// }, {
	// 	name: '职位'
	// }, {
	// 	name: '营销'
	// }, {
	// 	name: '招商'
	// }, {
	// 	name: '服务'
	// }])
	let tabList = reactive([{
		name: '招聘',
		type: 4
	}, {
		name: '营销',
		type: 5
	}, {
		name: '招商',
		type: 6
	}, {
		name: '服务',
		type: 7
	}, {
		name: '商城',
		type: 2
	}, {
		name: '动态',
		type: 10
	}])	
	let dataList = reactive({
		data0: [],
		data1: [],
		data2: [],
		data3: [],
		data4: [],
		data5: [],
		data6: [],
		data7: [],
		data10: []
	})
	const getList = () => {
		let type;
		if(obj.current == 6){
			type = obj.currentService + 1
		} else {
			type = 0
		}
		proxy.$req('GET', proxy.$api.searchAll, {
			keyWord: searchWord.value,
			pageNum: page.value,
			pageSize: 10,
			searchType: sousuoType.value
		}).then((res) => {
			dataList[`data${sousuoType.value}`] = res.result.records
		})
	}
	const tabClick = (e) => {
		console.log(e)
		obj.current = e.index
		sousuoType.value = e.type
		// obj.currentService = 0
		page.value = 1
		getList()
		let data = dataList[`data${obj.current}`]
		let i = 0
		if (!data) {
			return
		}
	}
	const checkboxChange = (e) => {
		console.log(e,"打印e")
		var items = dataList[`data${obj.current}`],
			values = e.detail.value;
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if (values.includes(item.value)) {
				item.checked = true
			} else {
				item.checked = false
			}
		}
		console.log(values, "打印e")
	}
	const routerLink = (name,item) => {
		router.push({
			name,
			params: {
				id: item.id
			}
		})
	}
	//商品跳转
	const routerLink0 = (item) => {
		if(item.isType == 0){
			router.push({
				name:'goodsDetail',
				params: {
					id: item.id
				}
			})
		}else {
			router.push({
				name:'rentDetail',
				params: {
					id: item.id
				}
			}) 
		}
		
	}
	//店铺专属跳转
	const storeRouter = (item) => {
		let data;
		data = {
			isType:0,
			meiyeSupplier: {
				id: item.storeId,
				storeName:item.storeName,
				storeDescription:item.storeName
			},
		}
		router.push({
			name:'goodsBusiness',
			params: {
				data: JSON.stringify(data)
			}
		})
	}
	//服务列表专属跳转
	const routerService = (item) => {
		if(item.typeName == '店铺转让'){
			router.push({
				name:'serviceMakeover',
				params: {
					id: item.id,
					serviceType: '3'
				}
			})
		} else {
			let type;
			let serviceType;
			if(item.typeName == '店铺装修和美业证书'){
				proxy.$req('GET', proxy.$api.getCategory, {
					serviceId: item.id
				}).then((res) => {
					router.push({
						name:'serviceRichDetail',
						params: {
							id: item.id,
							type: String(res.result),
							serviceType: String(res.result + 1)
						}
					})
				})
			}else {
				router.push({
					name:'serviceRichDetail',
					params: {
						id: item.id,
						type: '3',
						serviceType: '4'
					}
				})
			}
			
		}
	}
</script>

<template>
	  <view class="navbar">    <u-navbar :placeholder="true" leftText="" title="" auto-back>      <template #center>        <view style="width: 70%;">          <u-search placeholder="请输入" v-model="searchWord" :showAction="false"            @search="searchList"></u-search>        </view>      </template>      <template #right>
		  <text @click="router.back()">取消</text>      </template>    </u-navbar>  </view>
	<view class="">
		<u-tabs lineColor="#CB645E" lineWidth="50rpx" :activeStyle="{
		            color: '#CB645E',
		            fontWeight: '600',
					fontSize:'28rpx'
		        }" :inactiveStyle="{
		            color: 'rgba(0,0,0,0.85)',
					fontSize:'28rpx'
		        }" itemStyle="padding:10rpx 35rpx; height: 34px;" :list="tabList" @click="tabClick"></u-tabs>
		<!-- 招聘 -->
		<view v-if="obj.current == 0" class="">
			<view class="recruitModules" v-for="(item,index) in dataList.data4" :key="index" @click="routerLink('jobDetail',item)" >
				<view class="right">
					<view class="companyName">
						{{item.companyName}}
					</view>
					<view class="xinxi">
						<view class="name">{{item.jobName}}</view>
						<view class="money">{{item.comprehensiveSalaryStart}} - {{item.comprehensiveSalaryEnd}}</view>
					</view>
					<view class="address">
						{{item.address}}
					</view>
					<view class="message">
						{{item.jobDescription}}
					</view>
				</view>
			</view>
		</view>
		<!-- 营销 -->
		<view v-if="obj.current == 1" class="">
			<view class="markCon1" v-for="(item,index) in dataList.data5" :key="index" @click="routerLink('marketingDetail',item)">
				<image class="mcLeft" v-if="item.coverImages != null && JSON.parse(item.coverImages).length != 0" :src="JSON.parse(item.coverImages)[0].url"></image>
				<view class="mcRight">
					<view class="mcr1 u-line-2">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>
		<!-- 招商 -->
		<view v-if="obj.current == 2" class="">
			<label class="uni-list-cell uni-list-cell-pd">
				<view class="markCon2"  v-for="(item,index) in dataList.data6" :key="index" @click="routerLink('investmentDetail',item)">
					<image class="mcLeft" v-if="item.images != null && JSON.parse(item.images).length != 0" :src="JSON.parse(item.images)[0].url" mode="">
					</image>
					<view class="mcRight">
						<view class="mcr1 u-line-2">
							{{ item.title }}
						</view>
					</view>
				</view>
			</label>
		</view>
		<!-- 服务 -->
		<view v-if="obj.current == 3" class="" >
			<view class="markCon2" v-for="(item,index) in dataList.data7" :key="index" @click="routerService(item)">
				<image class="mcLeft" :src="JSON.parse(item.images)[0].url" mode="">
				</image>
				<view class="mcRight">
					<view class="mcr1 u-line-2">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>
		<!-- 商城 -->
		<view v-if="obj.current == 4" class="">
			
		</view>
		<!-- 新闻 -->
		<view v-if="obj.current == 5" class="">
			<view class="markCon2" v-for="(item,index) in dataList.data10" :key="index" @click="routerLink('newsDetail',item)">
				<image class="mcLeft" :src="item.images" mode="">
				</image>
				<view class="mcRight">
					<view class="mcr1 u-line-2">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="height: 200rpx;">
		
	</view>
</template>


<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	// ::v-deep .uni-checkbox-input{
	// 	background-color: #CB645E;
	// }
	:deep(.uni-checkbox-input svg) {
		background-color: #CB645E !important;
		padding: 10rpx;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}
	.modalDel {
		.del {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}
	
		.delFoot {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
	
			.btn1 {
				width: 206rpx;
				height: 88rpx;
				background: rgba(255, 255, 255, 0);
				border: 2rpx solid #CB645E;
				color: #CB645E;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}
	
			.btn2 {
				width: 206rpx;
				height: 88rpx;
				background: #CB645E;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}
		}
	}
	.recruitModules{
		width: 686rpx;
		// height: 264rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		display: flex;
		padding:30rpx 40rpx;
		box-sizing: border-box;
		margin: auto;
		margin-bottom: 30rpx;
		.right>view{
			margin-bottom: 10rpx;
		}
		.right{
			margin-left: 20rpx;
			width: 550rpx;
			.companyName{
				font-size: 20rpx;
			}
			.xinxi{
				display:flex;
				justify-content: space-between;
				margin-top: 40rpx;
				.name{
					font-weight: 600;
				}
				.money{
					
				}
				
			}
			.address{
				font-size: 20rpx;
				margin-bottom: 20rpx;
			}
			.message{
				font-size: 22rpx;
			}
		}
	}
	.position {
		padding: 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;

		.right {
			width: 226rpx;
			height: 64rpx;
			background: rgba(255, 255, 255, 0);
			border-radius: 12rpx;
			border: 2rpx solid #CB645E;
			font-size: 28rpx;
			font-weight: 400;
			color: #CB645E;
			text-align: center;
			padding: 13rpx;
			box-sizing: border-box;
		}
	}

	.forum {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		width: 686rpx;
		// height: 626rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;

		.head {
			display: flex;

			.headL {
				margin-right: 20rpx;

				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.headR {
				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}

				.text {
					margin-top: 10rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
			}

		}

		.center {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
			margin: 20rpx 0 25rpx 0;
		}

		.foot {
			width: 622rpx;
			height: 342rpx;
			margin: 20rpx auto;

			.img {
				width: 100%;
				height: 342rpx;
				border-radius: 20rpx;
			}
		}

		.foot2 {
			width: 578rpx;
			height: 318rpx;
		}
	}

	.shopModal {
		width: 686rpx;
		height: 256rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		box-sizing: border-box;

		.shopLeft {
			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.shopRight {
			width: 500rpx;

			.rightH {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.btn {
					width: 88rpx;
					height: 48rpx;
					background: rgba(255, 255, 255, 0);
					border: 1rpx solid #CB645E;
					color: #CB645E;
					text-align: center;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 50rpx;
				}

				.title {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.rightF {
				display: flex;
				justify-content: space-between;

				.img {
					width: 116rpx;
					height: 116rpx;
				}
			}
		}
	}

	.goodModal {
		position: relative;
		width: 686rpx;
		height: 244rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;
		display: flex;
		// justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;

		.check {
			margin-right: 10rpx;
			padding: 60rpx 0;
			box-sizing: border-box;
		}

		.goodLeft {
			margin-right: 20rpx;

			.img {
				width: 176rpx;
				height: 176rpx;
			}
		}

		.goodRight {
			.rightF {
				position: absolute;
				bottom: 30rpx;

				.yuan {
					color: #F22F19;
				}

				.num {
					font-size: 35rpx;
					font-weight: bold;
					color: #F22F19;
				}

				.del {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}
	}

	.markCon1 {
		box-sizing: border-box;
		width: 686rpx;
		// height: 216rpx;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.mcLeft {
			width: 176rpx;
			height: 200rpx;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}

		.mcRight {
			width: 430rpx;
			height: 200rpx;
			position: relative;

			.mcr1 {
				margin-top: 20rpx;
				width: 100%;
				height: 70rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			// .mcr2 {
			// 	display: flex;
			// 	justify-content: flex-end;
			// 	height: 50rpx;
			// 	margin: 15rpx 0;
			// 	view {
			// 		width: 100rpx;
			// 		height: 48rpx;
			// 		background-color: #CB645E;
			// 		border-radius: 6rpx;
			// 		justify-content: center;
			// 	}
			// }

			.mcr3 {
				position: absolute;
				bottom: 0rpx;
				width: 100%;
				// height: 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				view {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
	}
	
	.markCon2 {
		width: 686rpx;
		height: 264rpx;
		background: #FFFFFF;
		background-color: #fff;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 25rpx;
		box-sizing: border-box;

		.mcLeft {
			width: 176rpx;
			height: 200rpx;
			border-radius: 6rpx;
			margin-right: 25rpx;
		}

		.mcRight {
			width: 430rpx;
			height: 200rpx;

			.mcr1 {
				width: 100%;
				height: 70rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			.mcr2 {
				display: flex;
				justify-content: flex-end;
				height: 50rpx;
				margin: 15rpx 0;

				// image {
				// 	width: 100rpx;
				// 	height: 48rpx;
				// 	background-color: #CB645E;
				// 	border-radius: 6rpx;
				// }
				view {
					width: 100rpx;
					height: 48rpx;
					background-color: #CB645E;
					border-radius: 6rpx;
					justify-content: center;
				}
			}

			.mcr3 {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				view {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
	}
</style>